import React, { useState } from 'react';
import { Button, Form, Input, Modal, Select } from 'antd';
function Modals(props) {
    const [visiable, setVisiable] = useState(false);
    const [form] = Form.useForm();
    // 打开弹窗
    const open = () => {
        setVisiable(true);
    };
    //关闭弹窗
    const close = () => {
        setVisiable(false);
    };
    //点击确定提交表单
    const submit = () => {
        form.submit()
    }
    // 提交后获取表单数据，请求接口，重置表单并关闭
    const onSubmit = (values) => {
        console.log(values)
        //await  fetch ...
        form.resetFields();
        close()
    }
    return (
        <div className='modal'>
            <div className="text-center">
                <Button type="primary" onClick={open}>
                    添加
                </Button>
            </div>
            <Modal
                wrapClassName="modal-wrap"
                okText="提交"
                cancelText="取消"
                cancelButtonProps={{ shape: 'round' }}
                okButtonProps={{ shape: 'round' }}
                width={600}
                visible={visiable}
                title="新建用户"
                onCancel={close}
                onOk={submit}
            >
                <div className="form">
                    <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} onFinish={onSubmit}>
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="用户邮箱"
                            name="mail"
                            rules={[{ required: true, message: '请输入邮箱!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="部门"
                            name="depart"
                            rules={[{ required: true, message: '请选择您的学院!' }]}
                        >
                            <Select>
                                <Select.Option value={1}>信工学院</Select.Option>
                                <Select.Option value={2}>商学院</Select.Option>
                                <Select.Option value={3}>文学院</Select.Option>
                            </Select>
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        </div>
    );
}

export default Modals;